<template>
  <div class="app-container">
    <div class="head-container treeShow" :style="{'height':treeHeight+'px', 'overflow': 'auto'}">
        <el-tree
            :data="partyOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            ref="tree"
            node-key="id"
            :default-expanded-keys="defaultExpandedKeys"
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <!-- <span>{{ node.label + "@" + data.id }}</span> -->
                <span v-if="data.id === -3 || data.id === -2" style="color: #c0c4cc;font-size: 14px;">{{ node.label }}</span>
                <span v-if="data.id !== -3 && data.id !== -2" style="font-size: 14px;">{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
  </div>
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import $ from 'jquery'

    export default {
        name: 'LeftMenu',
        components: {Treeselect},
        data() {
            return {
            treeHeight: 450,
            partyOptions: undefined,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            defaultExpandedKeys: [],
            }
        },
        watch: {
            '$store.state.app.screenHeight': function() { //监听屏幕高度变化
            this.treeHeight = window.innerHeight - 130
            }
        },
        created() {
        },
        methods: {
            // 节点单击事件
            handleNodeClick(data) {
            if (data.id === -2 || data.id === -3) {
                // 组织根节点,不响应
                return;
            }
            if (data.id === -1) {
                // filePath 文件路径 belong 所属 partyId 组织ID
                this.$router.push({
                query: { filePath: '/', belong: "2", partyId: '', belongName: '个人资料'}
                })
            } else {
                // filePath 文件路径 belong 所属 partyId 组织ID
                this.$router.push({
                query: { filePath: '/', belong: "1", partyId: data.id, belongName: data.label}
                })
            }
            },
        },

        mounted() {
            this.$nextTick(function() {
            this.treeHeight = window.innerHeight - 130
            })
            if (!this.$router.query || !this.$router.query.belong) {
            this.$router.push({
                query: { filePath: '/', belong: "2", partyId: '', belongName: '个人资料'}
            })
            }
        }
    }
</script>

<style>
  .custom-form-item {
    margin-bottom: 0px !important;
  }

  .custom-textarea .el-textarea__inner {
    display: block;
    resize: vertical;
    padding: 5px 0px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 0px solid #DCDFE6;
    border-radius: 4px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
</style>

<style scoped>
  .member-info {
    padding-bottom: 15px;
    font-size: 16px;
  }

  .amap-page-container1 {
    width: 100%;
    height: 350px;
  }

  .form-item {
    width: 240px;
  }
</style>
